<template>
  <div>
    <el-table
      :header-cell-style="addHeaderStyle"
      :data="table2"
      style="width: 100%"
      class="tableCol"
    >
      <el-table-column prop="address" label="月份"></el-table-column>
      <el-table-column prop="jan" label="一月">
        <template slot="header" slot-scope="scope">
          <a href="#" @click.prevent="navigator(scope.column.property)">{{scope.column.label}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="feb" label="二月">
        <template slot="header" slot-scope="scope">
          <a href="#" @click.prevent="navigator(scope.column.property)">{{scope.column.label}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="march" label="三月">
        <template slot="header" slot-scope="scope">
          <a href="#" @click.prevent="navigator(scope.column.property)">{{scope.column.label}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="april" label="四月">
        <template slot="header" slot-scope="scope">
          <a href="#" @click.prevent="navigator(scope.column.property)">{{scope.column.label}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="may" label="五月">
        <template slot="header" slot-scope="scope">
          <a href="#" @click.prevent="navigator(scope.column.property)">五月</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'table-info2',
  props: {
    month1: {
      typeof: String
    },
    month2: {
      typeof: String
    }
  },
  components: {},
  data () {
    return {
      table2: [
        {
          address: '销售额',
          jan: '8964',
          feb: '2976',
          march: '4897',
          april: '3876',
          may: '9976'
        },
        {
          address: '销量',
          jan: '3897',
          feb: '5976',
          march: '8976',
          april: '8947',
          may: '8975'
        },
        {
          address: '利润',
          jan: '976',
          feb: '8976',
          march: '8976',
          april: '896',
          may: '976'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {
    console.log('子组件1--2', this.month1, this.month2)
  },
  mounted () {},
  methods: {
    // 点击表头事件
    navigator (val) {
      console.log('表头插槽', val)
    },
    // 对表头添加方法
    addHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:rgb(204, 225, 255);'
      }
      console.log(111)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
